<script setup lang="tsx">
import { merchantDetailsApi, merchantEnterDetailsApi } from '@/api/BusinessManagement'
import { ElImage } from 'element-plus'
import {
  CompanyTypeDict,
  BusinessStateDict,
  LicenseValidityTypeDict,
  LegalCertValidityTypeDict,
  CardTypeDict
} from '@/utils/dict'
const props = defineProps({
  id: {
    type: Number,
    default: 0
  },
  type: {
    type: String,
    default: ''
  }
})

const detail = ref<any>({})

const getDetail = async () => {
  const api = props.type ? merchantEnterDetailsApi : merchantDetailsApi
  const res = await api(props.id)
  detail.value = res.data
}
getDetail()
</script>

<template>
  <div>
    <div class="flex">
      <img class="w-15 h-15 mr-4" :src="detail.appMerchantEnterApplyPageVo?.logo" alt="" />
      <div class="flex flex-col justify-around">
        <div class="font-bold">{{ detail.businessName }}</div>
        <div class="text-14px">ID：{{ detail.merchantNo }}</div>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>入驻时间：</span>
        <span>{{ detail.createTime }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>状态：</span>
        <span>{{ BusinessStateDict[detail.state] }}</span>
      </div>
    </div>
  </div>
  <div>
    <div class="font-bold py-2">经营信息</div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>商家简称：</span>
        <span>{{ detail.merchantShortName }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <div>商家logo：</div>
        <ElImage
          v-if="detail.appMerchantEnterApplyPageVo?.logo"
          :src="detail.appMerchantEnterApplyPageVo?.logo"
          fit="cover"
          class="w-45"
          lazy
          :preview-src-list="[detail.appMerchantEnterApplyPageVo?.logo]"
          preview-teleported
        />
      </div>
    </div>
    <div v-if="detail.companyType !== 0" class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>公司类型：</span>
        <span>{{ CompanyTypeDict[detail.companyType] }}</span>
      </div>
      <div class="flex flex-[50%] px-2"></div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>所属行业：</span>
        <span>{{ detail.mccName }}</span>
      </div>
      <div v-if="detail.companyType !== 0" class="flex flex-[50%] px-2">
        <span>成立时间：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.foundDate }}</span>
      </div>
    </div>
    <div v-if="detail.companyType !== 0" class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>注册资本：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.regCapital }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>经营范围：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.businessScope }}</span>
      </div>
    </div>
    <div v-if="detail.companyType !== 0" class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>营业执照编号：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.licenseCode }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>营业执照有效期：</span>
        <span>
          {{ LicenseValidityTypeDict[detail.appMerchantEnterApplyPageVo?.licenseValidityType] }}
        </span>
      </div>
    </div>
    <div v-if="detail.companyType !== 0" class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>营业执照有效期开始日期：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.licenseBeginDate }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>营业执照有效期截止日期：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.licenseEndDate }}</span>
      </div>
    </div>
    <div v-if="detail.companyType !== 0" class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <div>营业执照图片：</div>
        <ElImage
          v-if="detail.appMerchantEnterApplyPageVo?.licensePicUrl"
          :src="detail.appMerchantEnterApplyPageVo?.licensePicUrl"
          fit="cover"
          class="w-45"
          lazy
          :preview-src-list="[detail.appMerchantEnterApplyPageVo?.licensePicUrl]"
          preview-teleported
        />
      </div>
      <div class="flex flex-[50%] px-2">
        <span>客服电话：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.customerMobile }}</span>
      </div>
    </div>
    <div v-if="detail.companyType !== 0" class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>注册地址：</span>
        <span>
          {{ detail.appMerchantEnterApplyPageVo?.regProvinceName }}
          {{ detail.appMerchantEnterApplyPageVo?.regCityName }}
          {{ detail.appMerchantEnterApplyPageVo?.regCountyName }}
        </span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>注册详细地址：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.regAddress }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>经营地址：</span>
        <span>
          {{ detail.appMerchantEnterApplyPageVo?.businessProvinceName }}
          {{ detail.appMerchantEnterApplyPageVo?.businessCityName }}
          {{ detail.appMerchantEnterApplyPageVo?.businessCountyName }}
        </span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>经营详细地址：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.businessAddress }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <div>线下经营-门头照：</div>
        <ElImage
          v-if="detail.appMerchantEnterApplyPageVo?.storeHeaderPicUrl"
          :src="detail.appMerchantEnterApplyPageVo?.storeHeaderPicUrl"
          fit="cover"
          class="w-45"
          lazy
          :preview-src-list="[detail.appMerchantEnterApplyPageVo?.storeHeaderPicUrl]"
          preview-teleported
        />
      </div>
      <div class="flex flex-[50%] px-2">
        <div>线下经营-内景照：</div>
        <ElImage
          v-if="detail.appMerchantEnterApplyPageVo?.storeIndoorPicUrl"
          :src="detail.appMerchantEnterApplyPageVo?.storeIndoorPicUrl"
          fit="cover"
          class="w-45"
          lazy
          :preview-src-list="[detail.appMerchantEnterApplyPageVo?.storeIndoorPicUrl]"
          preview-teleported
        />
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <div>线下经营-收银台：</div>
        <ElImage
          v-if="detail.appMerchantEnterApplyPageVo?.storeCashierDeskPicUrl"
          :src="detail.appMerchantEnterApplyPageVo?.storeCashierDeskPicUrl"
          fit="cover"
          class="w-45"
          lazy
          :preview-src-list="[detail.appMerchantEnterApplyPageVo?.storeCashierDeskPicUrl]"
          preview-teleported
        />
      </div>
      <div class="flex-[50%] px-2"></div>
    </div>
  </div>
  <div>
    <div class="font-bold py-2">法人/联系人信息</div>
    <div class="flex text-14px py-2">
      <div v-if="detail.companyType !== 0" class="flex flex-[50%] px-2">
        <span>法人姓名：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.legalName }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>法人证件类型：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.legalCertType }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>法人证件号：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.legalCertNo }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>法人证件有效期：</span>
        <span>
          {{ LegalCertValidityTypeDict[detail.appMerchantEnterApplyPageVo?.legalCertValidityType] }}
        </span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>法人证件有效期开始日期：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.legalCertBeginDate }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>法人证件有效期截止日期：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.legalCertEndDate }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>法人手机号：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.legalMobileNo }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>法人身份证地址：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.legalAddr }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <div>法人身份证人像面：</div>
        <ElImage
          v-if="detail.appMerchantEnterApplyPageVo?.legalCertFrontPicUrl"
          :src="detail.appMerchantEnterApplyPageVo?.legalCertFrontPicUrl"
          fit="cover"
          class="w-45"
          lazy
          :preview-src-list="[detail.appMerchantEnterApplyPageVo?.legalCertFrontPicUrl]"
          preview-teleported
        />
      </div>
      <div class="flex flex-[50%] px-2">
        <div>法人身份证国徽面：</div>
        <ElImage
          v-if="detail.appMerchantEnterApplyPageVo?.legalCertBackPicUrl"
          :src="detail.appMerchantEnterApplyPageVo?.legalCertBackPicUrl"
          fit="cover"
          class="w-45"
          lazy
          :preview-src-list="[detail.appMerchantEnterApplyPageVo?.legalCertBackPicUrl]"
          preview-teleported
        />
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>联系人姓名：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.contactName }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>联系人手机号：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.contactMobileNo }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>联系人邮箱：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.contactEmail }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>系统管理员：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.mobile }}</span>
      </div>
    </div>
  </div>
  <div>
    <div class="font-bold py-2">结算信息</div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>账户类型：</span>
        <span
          v-if="
            detail.appMerchantEnterApplyPageVo?.cardType === 0 &&
            !detail.appMerchantEnterApplyPageVo?.regAcctPicUrl
          "
        >
          对私账户
        </span>
        <span v-else>{{ CardTypeDict[detail.appMerchantEnterApplyPageVo?.cardType] }}</span>
      </div>
      <div
        v-if="
          detail.appMerchantEnterApplyPageVo?.cardType === 0 &&
          detail.appMerchantEnterApplyPageVo?.regAcctPicUrl
        "
        class="flex flex-[50%] px-2"
      >
        <div>开户许可证：</div>
        <ElImage
          v-if="detail.appMerchantEnterApplyPageVo?.regAcctPicUrl"
          :src="detail.appMerchantEnterApplyPageVo?.regAcctPicUrl"
          fit="cover"
          class="w-45"
          lazy
          :preview-src-list="[detail.appMerchantEnterApplyPageVo?.regAcctPicUrl]"
          preview-teleported
        />
      </div>
      <div
        v-if="
          detail.appMerchantEnterApplyPageVo?.cardType === 1 ||
          detail.appMerchantEnterApplyPageVo?.cardType === 2 ||
          (detail.appMerchantEnterApplyPageVo?.cardType === 0 &&
            !detail.appMerchantEnterApplyPageVo?.regAcctPicUrl)
        "
        class="flex flex-[50%] px-2"
      >
        <span>账户名称：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.cardName }}</span>
      </div>
    </div>
    <div
      v-if="
        detail.appMerchantEnterApplyPageVo?.cardType === 0 &&
        detail.appMerchantEnterApplyPageVo?.regAcctPicUrl
      "
      class="flex text-14px py-2"
    >
      <div class="flex flex-[50%] px-2">
        <span>开户许可证核准号：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.openLicenceNo }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>账户名称：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.cardName }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>银行账号：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.cardNo }}</span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>开户银行：{{ detail.appMerchantEnterApplyPageVo?.bankName }}</span>
        <span></span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-2">
        <span>银行卡所在地：</span>
        <span>
          {{ detail.appMerchantEnterApplyPageVo?.bankProvinceName }}
          {{ detail.appMerchantEnterApplyPageVo?.bankCityName }}
          {{ detail.appMerchantEnterApplyPageVo?.bankCountyName }}
        </span>
      </div>
      <div class="flex flex-[50%] px-2">
        <span>银行编码：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.bankCode }}</span>
      </div>
    </div>
    <div
      v-if="
        detail.appMerchantEnterApplyPageVo?.cardType === 1 ||
        detail.appMerchantEnterApplyPageVo?.cardType === 2 ||
        (detail.appMerchantEnterApplyPageVo?.cardType === 0 &&
          !detail.appMerchantEnterApplyPageVo?.regAcctPicUrl)
      "
      class="flex text-14px py-2"
    >
      <div class="flex flex-[50%] px-2">
        <span>支行联行号：</span>
        <span>{{ detail.appMerchantEnterApplyPageVo?.branchCode }}</span>
      </div>
      <div class="flex flex-[50%] px-2"></div>
    </div>
    <template
      v-if="
        detail.appMerchantEnterApplyPageVo?.cardType === 1 ||
        detail.appMerchantEnterApplyPageVo?.cardType === 2 ||
        (detail.appMerchantEnterApplyPageVo?.cardType === 0 &&
          !detail.appMerchantEnterApplyPageVo?.regAcctPicUrl)
      "
    >
      <div class="flex text-14px py-2">
        <div class="flex flex-[50%] px-2">
          <span>持卡人证件类型：</span>
          <span>{{ detail.appMerchantEnterApplyPageVo?.certType }}</span>
        </div>
        <div class="flex flex-[50%] px-2">
          <span>持卡人证件号码：{{ detail.appMerchantEnterApplyPageVo?.certNo }}</span>
          <span></span>
        </div>
      </div>
      <div class="flex text-14px py-2">
        <div class="flex flex-[50%] px-2">
          <span>持卡人证件有效期：</span>
          <span>{{
            LegalCertValidityTypeDict[detail.appMerchantEnterApplyPageVo?.certValidityType]
          }}</span>
        </div>
        <div class="flex flex-[50%] px-2">
          <span>持卡人证件有效期开始日期：</span>
          <span>{{ detail.appMerchantEnterApplyPageVo?.certBeginDate }}</span>
        </div>
      </div>
      <div class="flex text-14px py-2">
        <div class="flex flex-[50%] px-2">
          <span>持卡人证件有效期截止日期：</span>
          <span>{{ detail.appMerchantEnterApplyPageVo?.certEndDate }}</span>
        </div>
        <div class="flex flex-[50%] px-2">
          <span>银行卡正面：</span>
          <ElImage
            v-if="detail.appMerchantEnterApplyPageVo?.settleCardFrontPicUrl"
            :src="detail.appMerchantEnterApplyPageVo?.settleCardFrontPicUrl"
            fit="cover"
            class="w-15"
            lazy
            :preview-src-list="[detail.appMerchantEnterApplyPageVo?.settleCardFrontPicUrl]"
            preview-teleported
          />
        </div>
      </div>
      <div class="flex text-14px py-2">
        <div class="flex flex-[50%] px-2">
          <span>持卡人身份证人像面：</span>
          <ElImage
            v-if="detail.appMerchantEnterApplyPageVo?.settleCertFrontPicUrl"
            :src="detail.appMerchantEnterApplyPageVo?.settleCertFrontPicUrl"
            fit="cover"
            class="w-15"
            lazy
            :preview-src-list="[detail.appMerchantEnterApplyPageVo?.settleCertFrontPicUrl]"
            preview-teleported
          />
        </div>
        <div class="flex flex-[50%] px-2">
          <span>持卡人身份证国徽面：</span>
          <ElImage
            v-if="detail.appMerchantEnterApplyPageVo?.settleCertBackPicUrl"
            :src="detail.appMerchantEnterApplyPageVo?.settleCertBackPicUrl"
            fit="cover"
            class="w-15"
            lazy
            :preview-src-list="[detail.appMerchantEnterApplyPageVo?.settleCertBackPicUrl]"
            preview-teleported
          />
        </div>
      </div>
      <div class="flex text-14px py-2">
        <div class="flex flex-[50%] px-2">
          <span>银行卡绑定手机号：</span>
          <span>{{ detail.appMerchantEnterApplyPageVo?.mp }}</span>
        </div>
        <div class="flex flex-[50%] px-2"></div>
      </div>
    </template>
  </div>
</template>
